<template>
	<div class="workbench-container">
		<base-form :data="[]" :option="formOption" :show-button="true">
			<template slot="form-slot-after-userName">
				插槽内容，位置设置使用表单的prop加before或after置入
			</template>
			<template slot="form-slot-before-textArea">
				插槽内容599999
			</template>
			<template slot="form-slot-before-textArea">
				<el-button type="primary" @click="showPersonSelection = true">选择人员</el-button>
			</template>
		</base-form>

		<!--通用表格-->
		<base-table :data="data" :checked="checkedData" :option="tableOption" :loading="loading" row-key="tid"
					@select="getSelect" @pageChange="pageChange">
			<!--表格头部工具插槽-->
			<template slot="table-tools">
				<el-button type="primary" size="mini">新增</el-button>
				<el-button type="primary" plain size="mini">编辑</el-button>
				<el-button type="danger" plain size="mini" @click="deleteTest">删除</el-button>
			</template>
			<!--操作按钮插槽-->
			<template slot="table-slot-action" slot-scope="scope">
				<el-link type="success" @click="detail(scope)">
					{{ translate('button.detail') }}
				</el-link>
				<el-link type="primary" @click="edit(scope)" v-if="scope.row.status==='0'">
					{{ translate('button.edit') }}
				</el-link>
				<el-link type="danger" @click="del(scope)" v-if="scope.row.status==='0'">
					{{ translate('button.delete') }}
				</el-link>
			</template>
			<!--其他插槽-->
			<template slot="table-slot-other" slot-scope="scope">
				<div>其他插槽</div>
			</template>

		</base-table>

		<!--人员选择弹窗-->
		<person-selection v-model="showPersonSelection"
						  :params="{orderBy:[],data:{}}"
						  default-checked="sys/chooseUserData/findAllUserList"
						  :select-type="selectType.checkbox"
						  :checked-max="27"
						  :include-tabs="[PersonSelectionTabsEnum.role,PersonSelectionTabsEnum.orgTree]"
						  @tabs-change="tabsChange"
						  @sure="personSelect"
						  @cancel="showPersonSelection = false">
			<p slot="pane-role" slot-title="插槽11">插槽1</p>
			<template slot="pane-def">
				<p :slot-title="translate('button.baseInfo')">插槽11</p>
			</template>
			<div slot="pane-customer" slot-title="插槽标题" slot-scope="scope">
				<h3 @click="testSlot(scope.tabs)">title</h3>
				<p>一段文字</p>
				<div>自定义表格</div>
				自定义插槽
			</div>
		</person-selection>
	</div>
</template>
<script lang="ts">
import _ from 'lodash';
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue.vue'

import ResponseModel from '@/common/model/response.model';
import Pages from '@/components-sys/pages/page.vue'
import BaseTable from '@/components-sys/base-table/base-table.vue'

import BaseTableOptionModel from "@/components-sys/base-table/model/base-table-option.model";
import {AlignEnum, ColumnTypeEnum, FixedEnum, SelectionEnum} from "@/components-sys/base-table/enums/base-table.enum";
import BaseForm from "@/components-sys/base-form/base-form.vue";
import BaseFormOptionModel from "@/components-sys/base-form/model/base-form-option.model";
import {FormTypeEnum, AcceptEnum, SelectItemStateEnum} from "@/components-sys/base-form/enums/base-form.enum";
import TestTableDataModel from "./model/test-table-data.model";
import PagesModel from "@/components-sys/pages/pages.model";
import LoadingModel from "@/components-sys/loading-directive/loading.model";
import {LoadingTypeEnum} from "@/components-sys/loading-directive/loading-type.enum";
import PersonSelection from "@/components-com/person-selection/index";
import PersonModel from "@/components-com/person-selection/model/person.model";
import {PersonSelectionTabsEnum} from '@/components-com/person-selection/enums/person-selection.enum';

@Component({components: {PersonSelection, BaseForm, Pages, BaseTable}})
export default class Workbench extends BaseVue {
	/*显示隐藏选人弹窗*/
	public showPersonSelection = false;
	public selectType = SelectionEnum;

	private PersonSelectionTabsEnum = PersonSelectionTabsEnum;
	/*表单配置*/
	public formOption: BaseFormOptionModel = new BaseFormOptionModel();

	/*表格配置*/
	public tableOption: BaseTableOptionModel = new BaseTableOptionModel();

	/*表格加载状态*/
	public loading:boolean | LoadingModel = false;

	/*表格数据，模拟数据源*/
	public data: ResponseModel = new ResponseModel<TestTableDataModel>();
	public resData = [
		{tid: 3, name: '张岚', sex: 0, idCard: '45074541212454567', date: '2021-04-06 17:51:39', status: '20',header:'http://d302.paixin.com/thumbs/4570119/359708072/staff_1024.jpg'},
		{tid: 5, name: '吾郡丰', sex: 1, idCard: '4507845232125545', date: '2021-04-18 17:51:39', status: '10'},
		{tid: 7, name: 'long龟', sex: 1, idCard: '456845642124565', date: '2021-04-23 15:35:7', status: '10'},
		{tid: 9, name: '王艾岑', sex: 0, idCard: '4507845412124545', date: '2021-06-13 9:51:42', status: '0'},
		{tid: 13, name: '刘桐', sex: 0, idCard: '4507845412124545', date: '2021-04-16 17:51:39', status: '20'},
		{tid: 15, name: '爱欣宝', sex: 1, idCard: '457884541263453', date: '2021-04-28 17:51:39', status: '0'},
		{tid: 17, name: '路达沈', sex: 1, idCard: '45078454127867', date: '2021-04-23 15:35:7', status: '20'},
		{tid: 19, name: '王麻子', sex: 0, idCard: '450755412124545', date: '2021-06-03 9:51:42', status: '0'},
		{tid: 23, name: '卢林华', sex: 0, idCard: '450787554586453', date: '2021-04-05 17:51:39', status: '0'},
		{tid: 25, name: '吴时达', sex: 1, idCard: '4505545412124545', date: '2021-04-23 17:51:39', status: '30'},
	]
	/*模拟默认已勾选的回显*/
	public checkedData = [
		{tid: 7, name: 'long龟', sex: 1, idCard: '456845642124565', date: '2021-04-23 15:35:7', status: '10'},
		{tid: 5, name: '吾郡丰', sex: 1, idCard: '4507845232125545', date: '2021-04-18 17:51:39', status: '10'},
		{tid: 3, name: '张岚', sex: 0, idCard: '45074541212454567', date: '2021-04-06 17:51:39', status: '20'},
		{tid: 15, name: '路达沈', sex: 1, idCard: '45078454127867', date: '2021-04-23 15:35:7', status: '20'},
		{tid: 23, name: '卢林华', sex: 0, idCard: '450787554586453', date: '2021-04-05 17:51:39', status: '30'},
		{tid: 19, name: '吴时达', sex: 1, idCard: '4505545412124545', date: '2021-04-23 17:51:39', status: '30'}
	]

	/**
	 * 生命周期created
	 */
	public created() {
		/*表单配置*/
		this.formOption.labelAlign ='top';
		// this.formOption.labelWidth ='120px';
		this.formOption.inline=false;
		this.formOption.formItem = [
			{   label:'用户名', prop:'userName', type:FormTypeEnum.text, placeholder:'输入用户名', required:true },
			{	label:'密码',prop:'pwd',type:FormTypeEnum.password,placeholder:'输入密码',required:true},
			{	label:'文件',prop:'file1',type:FormTypeEnum.file,placeholder:'上传文件',required:true},
			{	label:'文件多选',prop:'filem',type:FormTypeEnum.file,placeholder:'上传文件',required:true,multi:true},
			{	label:'图片',prop:'image',type:FormTypeEnum.fileImage,placeholder:'上传图片',required:true,
				value:{fileId:'1135',filePath:'default/2021/4/16/10/12/lbXxbvpkUDRG2gnzUcBrExdO9ASDWf9R.JPG',fileName:'图片1.png'}
			},
			{	label:'图片多选',prop:'imagem',type:FormTypeEnum.fileImage,placeholder:'上传图片',required:true,multi:true,
				accept:AcceptEnum.image,maxSize:200,
				value:[{fileId:'1135',filePath:'default/2021/4/16/10/12/lbXxbvpkUDRG2gnzUcBrExdO9ASDWf9R.JPG',fileName:'图片多选.png'}]},
			{	label:'文本域',prop:'textArea',type:FormTypeEnum.textarea,rows:3, placeholder:'输入文本',required:true},
			{	label:'下拉选择',prop:'selector',type:FormTypeEnum.selector,placeholder:'请选择',required:true,multi:true,
				value:[{label:'选项2',value:'value2'}],
				itemList:[{tid:1,label:'选项1',value:'value1'},
					{label:'选项2',value:'value2'},
					{tid:3,label:'选项3',value:'value3',state:SelectItemStateEnum.disabled}],
			},
			{	label:'单选',prop:'radio',type:FormTypeEnum.radio,placeholder:'请选择',required:true,
				value:{label:'选项2',value:'value2'},
				itemList:[{tid:1,label:'选项1',value:'value1'},
					{label:'选项2',value:'value2'},
					{label:'选项3',value:'value3',state:SelectItemStateEnum.disabled}],
			},
			{	label:'多选checkbox',prop:'checkboxs',type:FormTypeEnum.checkbox,placeholder:'请选择',required:true,
				value:[{tid:2,label:'选项2'}],
				itemList:[{tid:1,label:'选项1',value:'value1'},
					{tid:2,label:'选项2'},
					{tid:3,label:'选项3',value:'value3',state:SelectItemStateEnum.disabled}],
			},
			{	label:'开关',prop:'switch',type:FormTypeEnum.switch,value:true, disabled:false},
			{	label:'日期选择',prop:'datePick',type:FormTypeEnum.datePick,value:'2020-04-15 23:59:59',placeholder:'选择日期',required:true,
				textFormat:'yyyy-MM-dd',valueFormat:'yyyy-MM-dd 23:59:59',disabledBefore:'2021-4-9',disabledAfter:'2023-12-01'},
			{	label:'时间日期',prop:'datetimePick',type:FormTypeEnum.dateTimePick,value:'2020-04-15 13:25:32',placeholder:'选择时间日期',required:true,
				disabledBefore:'2021-4-9',disabledAfter:'2023-12-01'},
			{	label:'时间选择',prop:'timePick',type:FormTypeEnum.timePick,placeholder:'选择时间',required:true,
				timeOption:{start:'00:00',step:'00:15',end:'23:45'}
			}
		]

		/*配置表格的列*/
		this.tableOption.selection=SelectionEnum.checkbox;
		this.tableOption.stripe = true;
		this.tableOption.column=[
			{label: '序号', prop: 'index', width: 70, type:ColumnTypeEnum.index,align:AlignEnum.center},
			{label: '姓名', prop: 'name', width: 120, sortable: true},
			// {label: '头像', prop: 'header', width: 80, type: ColumnTypeEnum.image},
			{label: '身份证', prop: 'idCard', sortable: true, showTip:true},
			{label: '其他插槽', prop: 'other', type: ColumnTypeEnum.slot},
			{label: '性别', prop: 'sex', width: 80, sortable: true},
			{label: '申请时间', prop: 'date', sortable: true, showTip:true},
			{label: '状态', prop: 'status', width: 100, sortable: true},
			{label: '操作', prop: 'action', width: 120, type: ColumnTypeEnum.slot},
		]

		//复制模拟数组
		this.data.data = [...this.resData];
		this.data.pageSize=10;
		this.data.pageIndex=1;
		this.data.totalRows=2652;

	};

	/**
	 * 生命周期mounted
	 */
	public mounted() {
		// console.log(this.requestParams);
		const loading = this.$baseLoading({type:'spine',message:'使劲儿加载中...',size:0.75});
		setTimeout(()=>{
			loading.close()
		},500)
	};

	/**
	 * 详情
	 */
	public detail(scope) {
		console.log(scope)
	};

	/**
	 * 编辑
	 */
	public edit(scope) {
		console.log('编辑', scope)
	};

	/**
	 * 删除
	 */
	public del(scope) {
		this.data.data.splice(scope.$index,1);
	};
	public deleteTest(){
		this.data.data.map((item,index)=>{
			this.checkedData.map(val=>{
				if(item.tid===val.tid){
					this.data.data.splice(index,1)
				}
			})
		})
		this.checkedData=[]
	}

	/**
	 * 表格勾选数据
	 */
	//
	public getSelect(val){
		console.log(val)
		this.checkedData=val
	};

	/**
	 * 弹窗选择人员
	 */
	public personSelect(list:PersonModel){
		console.log(list)
		// this.showPersonSelcetion = false;
	}

	/**
	 * 获取当前切换的插槽tabs
	 */
	private testSlot(val){
		console.log(val)
	}
	private tabsChange(val:string){
		console.log(val)
	}

	/**
	 * 每页条数切换
	 */
	public sizeChange(val:PagesModel) {

	}

	/**
	 * 翻页
	 */
	public pageChange(val:PagesModel) {
		this.loading = true;
		// 模拟翻页
		if (val.pageIndex === 2) {
			let newArr = _.cloneDeep(this.resData);
			newArr.forEach(item => {
				item.tid += 100;
				item.name += 'bak'
			});
			newArr.reverse();
			this.$set(this.data, 'data', newArr)
		} else {
			this.$set(this.data, 'data', [...this.resData])
		}
		setTimeout(()=>{
			this.loading = false;
		},1000)
	}
};
</script>
<style lang="scss" scoped>
.service-mgt-container {
	padding: 0 20px 0 0;
}
</style>
